<template>
  <div class="notice-container">

    <div class="notice-left">
      <h2>{{ asideNavItems[activeNavIndex].text }}</h2><hr>
				<ul>
					<li
            v-for="item,index in asideNavItems"
            v-if="index!==activeNavIndex"
            :key="item.text"
            @click="asideNavClick(index)">
            <p>
              {{ item.text }}
            </p>
          </li>
        </ul>
    </div>
    <div class="notice-right">
      <div
        v-if="showDetails"
        class="notice-info">
        <h3 :style="{ color: detail.color }">{{ detail.systemNoticeTitle }}</h3>
          <span>发布时间：{{ detail.createTime }}</span>
          <hr />
          <div class="notice-content">
            <pre v-html="detail.content"></pre>
          </div>
      </div>
      <div v-else>
        <ul
          v-if="noticeList.length"
          class="notice-list">
          <li
            v-for="item in noticeList"
            :key="item.systemNoticeID">
            <nuxt-link
              :to="`/notice4/${item.systemNoticeID}`">
              <h6
                :style="`color: ${item.color}`">
                {{ item.systemNoticeTitle }}</h6>
              <p><span>{{ item.createTime }}</span></p>
            </nuxt-link>
          </li>
        </ul>
        <div v-else class="notice-not-thing">
          <i class="layui-icon layui-icon-face-surprised"></i>
          <span>哎呀呀...这里竟然是空的~！</span>
        </div>
      </div>
    </div>
    <qqservice />
  </div>
</template>

<script>
import qqservice from '~/components/themes/qqservice'
export default {
  layout: "web6",
  components: {
    qqservice,
  },
  async asyncData({ $axios, route }) {
    const { id } = route.params
    let showDetails = true
    let detail = {}
    if(id === '-1') {
      showDetails = false
    } else {
      const res = await $axios.get('/site/systemNotice/getSystemNotice', {
        params: {
          id
        }
      })

      if (res.code === 1001 && res.body) {
        detail = res.body
      }
    }

    // 系统公告
    const b = await $axios.post('/site/systemNotice/pageFK', null, {
      params: {
        pageNum: 1,
        pageSize: 16
      }
    })
    let noticeList = []
    if (b.code === 1001 && b.body) {
      noticeList = b.body.records
    }
    return {
      detail,
      showDetails,
      // asideNavClick,
      activeNavIndex: 0,
      asideNavItems: [
        {
          text: '首页公告',
        },
        {
          text: '行业动态',
        },
        {
          text: '常见问题',
        },
        {
          text: '帮助信息',
        },
        {
          text: '最新动态',
        },
      ],
      noticeList
    }
  },
  data() {
    return {
      asideNavClick(index) {
        this.activeNavIndex = index
        this.showDetails = false
      },
    }
  },
}
</script>

<style lang="scss" scoped>
.notice {
  &-container {
    width: 1200px;
    padding-top: 10px;
    overflow: hidden;
    margin: 0 auto;
  }
  &-left {
    position: relative;
    float: left;
    width: 180px;
    min-height: 720px;
    background: white;
    border-radius: 2px;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    h2 {
      color: #000;
      font-size: 18px;
      line-height: 50px;
      font-weight: 600;
      background-image: unset;
    }
    hr {
      background-color: #e6e6e6;
    }
    li {
      display: block;
      color: #666;
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      width: 100%;
      font-family: "Microsoft YaHei";
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      cursor: pointer;
    }
  }
  &-right {
    position: relative;
    float: right;
    width: 1000px;
    min-height: 720px;
    background: white;
    border-radius: 2px;
    padding: 20px 30px;
    box-sizing: border-box;
    border: 1px solid #ddd;

  }

  &-not-thing {
    position: relative;
    width: 100%;
    padding: 100px 20px;
    box-sizing: border-box;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    i {
      font-size: 100px;
      color: #1E9FFF;
      display: block;
    }
    span {
      display: block;
      line-height: 50px;
      font-size: 12px;
    }
  }
  &-list {
    position: relative;
    width: 100%;
    float: right;
    border: 1px solid #f1f0f4;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 3px;
    li {
      position: relative;
      padding: 5px 0;
      border-bottom: 1px dashed #f1f0f4;
      h6 {
        color: #333;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        width: 650px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p {
        position: absolute;
        top: 5px;
        right: 0;
        line-height: 30px;
        font-size: 14px;
        span {
          margin-right: 20px;
          font-size: 14px;
        }
      }
    }
  }

  &-info {
    position: relative;
    box-sizing: border-box;
    h3 {
      text-align: center;
      font-size: 18px;
      line-height: 40px;
      display: block;
    }
    span {
      position: relative;
      text-align: center;
      color: #888;
      font-size: 14px;
      line-height: 20px;
      display: block;
    }
    .notice-content {
      position: relative;
      margin-top: 15px;
      width: 100%;
      overflow: hidden;
    }
  }

}
</style>
